<template>
  <div>
    <el-card style="margin: 10px;">
      <el-row style="margin: 5px;">
        <el-select v-model="pageParms.status" clearable placeholder="请选择">
          <el-option v-for="item in options" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

        <el-button type="primary" style="margin: 0  5px;" @click="getList()">查询</el-button>
      </el-row>
      <el-table ref="filterTable" :data="allLogList" style="width: 100%" height="500" border
        :row-class-name="tableRowClassName">
        <el-table-column prop="date" label="序号" width="50" align="center">
          <template #default="{row,$index}">
            {{$index+1}}
          </template>
        </el-table-column>

        <el-table-column prop="operName" label="发起人" width="180" align="center">
        </el-table-column>

        <el-table-column prop="operUrl" label="请求URI">
        </el-table-column>

        <el-table-column prop="operIp" width="120" label="ip地址" align="center">
        </el-table-column>

        <el-table-column prop="deptName" label="浏览器" width="90" align="center">
        </el-table-column>
        <!-- 操作系统 :formatter="formatter" -->
        <!-- <el-table-column prop="deviceName" label="操作系统">
        </el-table-column> -->

        <el-table-column prop="createTime" label="发起时间">
          <template #default="{row,$index}">
            {{ row.createTime | formatCreateTimes }}
          </template>
        </el-table-column>

        <!-- execute_time -->
        <!-- <el-table-column prop="execute_time" label="耗时" width="80">
          <template #default="{row,$index}">
            {{ row.executeTime }} ms
          </template>
        </el-table-column> -->

        <el-table-column prop="status" label="标签" align="center" width="100"
          :filters="[{ text: '成功', value: '0' }, { text: '失败', value: '1' }]" :filter-method="filterTag"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 0 ? 'danger' : 'success'" disable-transitions>
              {{scope.row.status==0?'error':'success'}}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="ip可用状态" align="center">
          <template #default="{row,$index}">
            {{row.isApply==0?'正常访问':'禁用'}}
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="280" align="center">
          <template #default="{row,$index}">
            <el-button size="small" type="success" @click="apply(row)">取消禁用</el-button>
            <el-button size="small" type="danger" @click="noapply(row)">禁用ip</el-button>
            <el-button size="small" type="primary" @click="showLog(row)">详情</el-button>


          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin: 10px;">
        <el-pagination style="float: right;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageParms.pageNum" :page-sizes="[ 10, 20,30]" :page-size="pageParms.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-row>


      <el-dialog title="日志详情" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <div style="height: 600px;overflow: auto;">
          <el-form ref="form" :model="rowData" label-width="150px">
            <el-form-item label="日志类型:">
              {{rowData.businessType}}
            </el-form-item>
            <el-form-item label="创建用户名称:">
              {{rowData.operName}}
            </el-form-item>
            <el-form-item label="创建时间:">
              <template slot-scope="scope">{{ scope.row.createTime | formatCreateTimes }}</template>
            </el-form-item>
            <el-form-item label="请求URI:">
              <span style="color: #00aaff;"> {{ rowData.operUrl }}</span>
            </el-form-item>
            <!--  -->
            <el-form-item label="请求方式:">
              {{ rowData.requestMethod }}
            </el-form-item>

            <el-form-item label="请求参数:">
              {{ rowData.operParam==""?"无":rowData.operParam }}
            </el-form-item>

            <el-form-item label="请求IP:">
              {{ rowData.operIp }}
            </el-form-item>

            <!-- <el-form-item label="请求服务器地址:">
              {{ rowData.serverAddress }}
            </el-form-item> -->
            <el-form-item label="请求状态:">
              <span v-if="rowData.status == 1" style="color: lightgreen;">
                success
              </span>
              <span v-if="rowData.status == 0" style="color: red;">
                error
              </span>
            </el-form-item>

            <el-form-item label="异常信息:" v-if="rowData.status == 0">
              <span style="color: red;">
                {{rowData.exceptionInfo}}
              </span>
            </el-form-item>
            <el-form-item label="浏览器:">
              {{ rowData.deptName }}
            </el-form-item>
            <el-form-item label="响应体">
              <el-input type="textarea" v-model="rowData.jsonResult" maxlength="30"></el-input>
            </el-form-item>
          </el-form>
        </div>

      </el-dialog>

    </el-card>
  </div>
</template>

<script>
  import {
    formatDate
  } from '../../../utils/date.js'
  export default {
    data() {
      return {
        allLogList: [],
        pageParms: {
          pageNum: 1,
          pageSize: 10,
          keyWord: ""
        },
        total: 0,
        options: [{
          label: 'error',
          value: 0
        },
        {
          label: 'success',
          value: 1
        }
        ],
        dialogVisible: false,
        rowData: {}
      }
    },
    mounted() {
      this.getList()
    },
    filters: {
      formatCreateTimes(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd  hh:mm:ss')
      }
    },
    methods: {
      getList() {
        this.$api.log.getAllLog(this.pageParms).then(res => {
          console.log(res.data);
          if (res.code == 200) {
            this.allLogList = res.data
            this.total = res.pageParams.total
          }
        })
      },
      resetDateFilter() {
        this.$refs.filterTable.clearFilter('date');
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.isException === value;
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        console.log(row);
        if (row.isException == 1) {
          return 'error-row';
        } else if (row.isException == 0) {
          return 'success-row';
        }
        return '';
      },
      handleClose(done) {
        done();
      },
      showLog(row) {
        this.dialogVisible = true
        this.rowData = row
      },
      handleSizeChange(val) {
        this.pageParms.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.pageParms.pageNum = val
        this.getList()
      },
      noapply(row) {
        this.$confirm('此操作将永久删除数据,并且该学生将无法登录,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(row);
          this.$api.common.noApply({ id: row.id }).then(res => {
            if (res.code == 200) {
              this.getList()
              this.$message.success("禁用成功~")
            }
          })
        }).catch(() => { })
      },
      apply(row) {
        this.$api.common.apply({ id: row.id }).then(res => {
          if (res.code == 200) {
            this.getList()
            this.$message.success("取消成功~")
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  ::v-deep .success-row {

    background: #f0f9eb !important;
  }

  ::v-deep .error-row {
    background: oldlace !important;
  }
</style>